<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'地下交通设施统计'"
      :secondTitles="[
        '停车场基础信息统计',
        '各街道停车场数量统计',
        '停车场设备类别统计',
      ]"
    >
      <template #left>
        <div class="w-100 h-100">
          <tccjcxx
            :chartData="typeData.map((item:any) => {
    return {
        ...item,
        value: Number(item.value) 
    };
})"
            :total="total"
            v-if="typeData"
          ></tccjcxx>
        </div>
      </template>
      <template #middle>
        <div class="w-100 h-100">
          <gjdtccsl :tccData="tccData" v-if="tccData"></gjdtccsl>
        </div>
      </template>
      <template #right>
        <div class="w-100 h-100">
          <tccsblb></tccsblb>
        </div>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import tccjcxx from "./tccjcxx.vue";
import gjdtccsl from "./gjdtccsl.vue";
import tccsblb from "./tccsblb.vue";
import { useFunc } from "@/hook/useFunc";
import API from "@/network/api";
const tccData = ref();
const typeData = ref();
const total = ref();
onMounted(() => {
  getSteetList();
  GroupByType();
});
const getSteetList = async () => {
  let res = await API.parking.SortByStreet();
  tccData.value = res.data.data;
};

const GroupByType = async () => {
  let res = await API.parking.GroupByType();
  typeData.value = res.data.data;
  total.value = res.data.total;
};
</script>

<style scoped lang="less"></style>
